<template>
  <a-spin tip="加载中..." :spinning="isLoading" style="height: calc(100% - 44px)">
    <div class="app-container crm-container">
      <a-breadcrumb style="margin-bottom: 20px">
        <a-breadcrumb-item>vue3+js子应用</a-breadcrumb-item>
        <a-breadcrumb-item>{{ label }} element plus</a-breadcrumb-item>
      </a-breadcrumb>
      <micro-app
        name="vue-js-app"
        url="http://localhost:3003"
        baseroute="/vue-js-app"
        @mounted="microAppMounted"
      ></micro-app>
      <!-- <micro-app
        v-if="isShowPage"
        class="micro-app"
        name="crm"
        :url="appUrlConfig.crmUrl"
        baseroute="/crm"
        :data="crmData"
        fiber
        router-mode="native"
        @mounted="microAppMounted"
        @error="onError"
      /> -->
      <!-- <ErrorPage v-else :code="500"></ErrorPage> -->
    </div>
  </a-spin>
</template>

<script setup>
import { ref } from 'vue';
// import { getToken } from "@/utils/auth";
// import { useUserStore } from "@/stores";
// import appUrlConfig from "@/config/appUrlconfig";
// import ErrorPage from "@/views/error/components/ErrorPage.vue";
// import { mainReceiveData } from "@/microApp/utils";

// // 正确使用 defineOptions
// defineOptions({ name: "crm" });

// const userStore = useUserStore();
// const crmData = ref({
//   token: getToken(),
//   userInfo: userStore.userInfo,
//   roles: userStore.roles
// });

// const label = ref("");
// mainReceiveData("crm", (data) => {
//   const currentRouteName = data.name ?? "";
//   if (currentRouteName === "clientInfo") {
//     const customerName = data?.customerInfo?.customerName;
//     const residence = data?.customerInfo?.residence;
//     if (data.customerInfo && residence) {
//       label.value = `${data.meta?.title} - ${customerName} - ${residence}`;
//     } else if (data.customerInfo && !residence) {
//       label.value = `${data.meta?.title} - ${customerName}`;
//     }
//   } else {
//     label.value = data.meta?.title ?? "";
//   }
// });

const isLoading = ref(true);
const microAppMounted = () => {
  isLoading.value = false;
};

// const isShowPage = ref(true);
// const onError = () => {
//   isShowPage.value = false;
// };
</script>

<style scoped lang="scss">
.crm-container {
  height: calc(100% - 40px);
}

.micro-app,
:deep(micro-app-body) {
  height: calc(100%);
}
</style>


<!-- <template> -->
    <!-- <h1>Vite + Vue 3 基座应用</h1> -->
    <!-- 加载子应用 -->
    <!-- <micro-app
      name="react-js-app"
      url="http://localhost:3001"
      baseroute="/react-js-app"
    ></micro-app>
    <micro-app
      name="react-ts-app"
      url="http://localhost:3002"
      baseroute="/react-ts-app"
    ></micro-app>
    <micro-app
      name="vue-js-app"
      url="http://localhost:3003"
      baseroute="/vue-js-app"
    ></micro-app>
    <micro-app
      name="vue-ts-app"
      url="http://localhost:3004"
      baseroute="/vue-ts-app"
    ></micro-app>
    <micro-app
      name="vue2-js-app"
      url="http://localhost:3005"
      baseroute="/vue2-js-app"
    ></micro-app> -->
    <!-- {/* name(必传)：应用名称 // url(必传)：应用地址，会被自动补全为http://localhost:3000/index.html */} -->
  <!-- </div> -->
<!-- </template> -->

<!-- <script>
import microApp from '@micro-zoe/micro-app';
export default {
  name: 'App',
  mounted() {
    console.log('window.microApp:》》》》》》', microApp); // 检查 microApp 是否存在
    // 向子应用发送数据
    microApp.setData('react-js-app', { message: 'Hello from Vite 基座 to React JS 子应用' });
    microApp.setData('react-ts-app', { message: 'Hello from Vite 基座 to React TS 子应用' });
    microApp.setData('vue-js-app', { message: 'Hello from Vite 基座 to Vue JS 子应用' });
    microApp.setData('vue-ts-app', { message: 'Hello from Vite 基座 to Vue TS 子应用' });
    microApp.setData('vue2-js-app', { message: 'Hello from Vite 基座 to Vue2 JS 子应用' });

    // 监听子应用发送的数据
    microApp.addDataListener('react-js-app', (data) => {
      console.log('Vite 基座收到 React JS 子应用的数据:', data);
    });
    microApp.addDataListener('react-ts-app', (data) => {
      console.log('Vite 基座收到 React TS 子应用的数据:', data);
    });
    microApp.addDataListener('vue-js-app', (data) => {
      console.log('Vite 基座收到 Vue JS 子应用的数据:', data);
    });
    microApp.addDataListener('vue-ts-app', (data) => {
      console.log('Vite 基座收到 Vue TS 子应用的数据:', data);
    });
    microApp.addDataListener('vue2-js-app', (data) => {
      console.log('Vite 基座收到 Vue2 JS 子应用的数据:', data);
    });
  },
  beforeUnmount() {
    // 清除监听器
    microApp.clearDataListener('react-js-app');
    microApp.clearDataListener('react-ts-app');
    microApp.clearDataListener('vue-js-app');
    microApp.clearDataListener('vue-ts-app');
    microApp.clearDataListener('vue2-js-app');
  },
};
</script> -->
